<template>
	<view class="com-links">
		<com-grid :gap="20" :data="data" :column="column">
			<template v-slot="{item, index}">
				<view class="com-links-item y-flex y-row y-align-center y-flex-1" :style="{'background-color': bgColor, 'border-radius': borderRadius + 'rpx'}" @tap="handleTap(item)">
					<com-logo v-if="item.icon" class="mr-10" size="50" :src="item.icon" :color="item.iconColor"></com-logo>
					<com-text lines="1" class="y-flex-1 ml-10" :value="item.title" size="28rpx" :color="titleColor"></com-text>
					<com-icon name="right" size="20rpx" :color="arrowColor"></com-icon>
				</view>
			</template>
		</com-grid>
	</view>
</template>

<script>
	export default {
		inject: ['getSkinColor', 'navigate'],
		props: {
			data: {
				type: Object,
				default () {
					return new Object
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			},
			bgColor: {
				type: String,
				default: ''
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			column (){
				return this.options.column || 2
			},
			borderRadius () {
				return this.options.borderRadius
			},
			titleColor () {
				return this.skinColor.color_1
			},
			arrowColor () {
				return this.skinColor.color_3
			}
		},
		methods: {
			handleTap (item) {
				this.navigate(item.url)
			}
		}
	}
</script>

<style>
	.com-links-item {
		padding: 20rpx 30rpx;
	}
</style>